
<template >
<div style="text-align:center">
    <h1>密码找回</h1>
    <br>
    <Steps :current="current">
        <Step title="获取短信验证码"></Step>
        <Step title="设置新密码"></Step>
        <Step title="密码修改成功"></Step>
    </Steps><br>
    <Row type="flex" justify="center">
            <div v-if="current==0" >    
                <Form ref="formLeft":model="formLeft":rules="ruleformLeft" label-position="left" :label-width="80">
                    <FormItem label="登录名" prop="username">
                        <Input v-model="formLeft.username" placeholder="请输入您的登陆账号">
                        <Icon type="ios-person-outline" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                    <FormItem label="手机号" prop="userphone">
                            <Input v-model="formLeft.userphone" placeholder="请输入手机号码"></Input>    
                    </FormItem>            
                    <FormItem label="验证码" prop="verification">
                    <Row><Col span="15">
                        <Input placeholder="请输入验证码" v-model="formLeft.verification"  ></Input>
                    </Col>
                    <Col span="8"style="margin-left:5px">   
                            <Button type="primary" @click="getcheckcode">点击获取</Button>
                    </Col>
                    </Row>
                    </FormItem>
                    
                </Form>
                <Button type="primary" @click="next('formLeft')">下一步</Button>
            </div>
            <div v-if="current==1">
                <Form ref="formpassword" :model="formpassword" :rules="ruleformLeft" label-position="left" :label-width="120">
                    <FormItem label="请输入新密码" prop="pwd">
                        <Input type="password" v-model="formpassword.pwd">
                            <Icon type="ios-locked-outline" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                    <FormItem label="请再次输入密码" prop="pwdcheck">
                        <Input type="password" v-model="formpassword.pwdcheck">
                            <Icon type="ios-locked-outline" slot="prepend"></Icon>
                        </Input>
                    </FormItem>        
                    <Button type="primary" @click="nexttwo('formpassword')">下一步</Button>            
                </Form> 
            </div>
            <div v-if="current==2">
                <font size="5px"> 修改密码成功 </font> 
                    <br><br>
                <Button @click="returnland" type="primary" >返回登陆</Button>
            </div>
    </Row>
</div>
</template>
<script>
export default {
    data () {      
        const validatePassCheck = (rule, value, callback) => {
            if  ((value != this.formpassword.pwd)||(value=='')) {
                callback(new Error('您未设置新密码或是两次输入的密码不同'));
            } else {
                callback();
            }
        };  
        return {
            formLeft:{
                username:'',
                verification:'', 
                userphone:''    
            },   
            formpassword:{
                pwd:'', 
                pwdcheck:'' 
            },
        ruleformLeft:{
            username:[
                {required:true, message:'登录名不能为空', trigger:'blur'}
            ],
            userphone:[
                {required:true, message:'电话不能为空', trigger:'blur'}
            ],
            verification:[
                {required:true, message:'验证码不能为空', trigger:'blur'}
            ],
            pwdcheck: [
                { validator: validatePassCheck, trigger: 'blur' }
            ]
        },
        mas:'',
        value:'',
        current: 0
    }
},               
    methods: {
        next (current) {
                if(this.current==0){
                    this.$refs[current].validate((valid) => {
                    if (valid) {
                            this.api.post("phone/check_auth_code",{auth_code: this.formLeft.verification}, res => {
                            if(res.value == true){
                            this.current=1;
                } else {
                    const title = '错误提示';
                    const content = '<p>验证码错误</p>';
                    this.$Modal.error({
                            title: title,
                            content: content
                        });                        
                }     
            })               
                        }   else {
                            this.$CustomMessage.info(res.message);
                        }
                        })                 
        }              
    },
        nexttwo (current){  
            if(this.current==1){
                    this.$refs[current].validate((valid) => {
                        if(valid) {    
                            this.api.post("member/retrievepwd",{password: this.formpassword.pwd} ,res => {
                            if(res.value==true){    
                                this.current=2;
                            } else {  
                                this.$CustomMessage.info(res.message);
                                }
                            })                           
                        } 
                    }
                )} 
    },
        returnland () {
            this.$router.push({
                        name: 'login'
                });
        },
        getcheckcode(){
            this.api.post("member/retrievejudge",{username: this.formLeft.username,userphone :this.formLeft.userphone}, res =>{
                console.log(res.value);
                if(res.value==true ){
                    this.api.post("phone/send_auth_code",{mobile_phone: this.formLeft.userphone,type_2:2},res=>{
                    this.ints1=res.value;
                    if(this.ints1 == true){     
                        this.$CustomMessage.success("验证码发送成功！");
                    }else{
                        this.$CustomMessage.error("验证码发送失败！");
                    }
                })
            }
                else
                {   const title = '错误提示';
                    const content = '<p>账号或手机错误</p>';
                    this.$Modal.error({
                    title: title,
                    content: content
                    });     
                }  
            })    
        }
    }
};          
</script>

    